<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-form size="small" label-width="70px">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="月份">
                <el-date-picker
                  v-model="date"
                  type="month"
                  size="small"
                  class="date-item"
                  style="width: 100%;"
                  format="yyyy - M"
                  value-format="yyyy-M"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="业务员">
                <table-select
                  :tableColumns="[{prop:'name',label:'业务员名称',width: '280'}]"
                  :value.sync="query.userIds"
                  placeholder="请选择业务员"
                  url="/api/dropDown/sysUserList"
                ></table-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-button class="filter-item" size="mini" type="primary" @click="queryReport">搜索</el-button>
              <el-button class="filter-item" plain size="mini" type="primary" @click="resetQuery">
                重置
              </el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <crudOperation :permission="permission" />
      <!--表格渲染-->
      <el-table
        ref="table"
        stripe border
        v-loading="crud.loading"
        :data="backData"
        size="small"
        height="500"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column :render-header="crud.renderHeader" type="selection" width="60" />
        <el-table-column
          fixed
          :render-header="crud.renderHeader"
          v-if="columns.visible('userName')"
          prop="userName"
          label="业务员"
        />
        <el-table-column
          width="105px"
          align="center"
          :render-header="crud.renderHeader"
          v-for="(item) in columnNames"
          :key="item"
          :prop="item"
          :label="item.match(/\d+/g).join('')"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="onMapShow(scope.row, item.match(/\d+/g).join(''))">{{
                scope.row[item]
              }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <MapShow
      v-if="centerDialogVisible"
      @onCenterDialogVisible="onCenterDialogVisible"
      :centerDialogVisible="centerDialogVisible"
      :userId="userId"
      :date="mapDate"
    />
  </div>
</template>

<script>
import reportSalesmanTrace, { queryAll } from '@/api/erp/reportSalesmanTrace'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import Treeselect from '@riophae/vue-treeselect'
import MapShow from './components/map'

// crud交由presenter持有
let thisDate = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
const defaultCrud = CRUD({
  title: '拜访点位查询', url: '/api/reportSalesmanTrace/queryAll', sort: 'id,desc',
  query: {
    month: thisDate.split('-')[1],
    year: thisDate.split('-')[0]
  },
  optShow: {
    add: false,
    edit: false,
    del: false,
    download: true,
    leadingIn: false,
    enable: false,
    disable: false
  },
  crudMethod: { ...reportSalesmanTrace }
})
const defaultForm = {
  // month,
  userIds: null,
  customerTypeId: null,
  areas: null
}
export default {
  name: 'reportSalesmanTrace',
  components: { pagination, crudOperation, rrOperation, udOperation, Treeselect, MapShow },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      centerDialogVisible: false,
      userId: '',
      userName: '',
      columnNames: [],
      permission: {
        add: ['admin'],
        edit: ['admin'],
        del: ['admin'],
        import: ['admin'],
        export: ['admin'],
        copy: ['admin', 'reportSalesmanTrace:copy'],
        upload: ['admin', 'reportSalesmanTrace:upload'],
        download: ['admin', 'reportSalesmanTrace:download']
      },
      rules: {
        id: [
          { required: true, message: 'id不能为空', trigger: 'blur' }
        ]
      },
      date: thisDate,
      mapDate: null,
      daysOfMonth: null
    }
  },
  created() {

  },
  computed: {
    backData: function (data) {
      this.columnNames = []
      let index = 0
      if (data.crud.data && data.crud.data.length > 0) {
        data.crud.data.map(item => {
          Object.keys(item).map(obj => {
            // obj.indexOf('-') > -1 && this.columnNames.indexOf(obj) === -1
            if (obj.includes('visitDuration') && this.columnNames.indexOf(obj) === -1 && index < this.crud.daysOfMonth) {
              index++
              this.columnNames.push(obj)
            }
          })
        })
      }
      return data.crud.data
    }
  },
  methods: {
    resetQuery() {
      this.crud.resetQuery()
    },
    queryReport() {
      if (!this.date) {
        this.$message('请先选择年月')
      } else {
        this.query.year = this.date.split('-')[0]
        this.query.month = this.date.split('-')[1]
        this.crud.toQuery()
      }

    },
    onCenterDialogVisible() {//点击关闭地图
      this.centerDialogVisible = false
    },
    onMapShow(row, item) {//点击弹出地图
      this.centerDialogVisible = true
      this.userId = row.userId
      this.mapDate = thisDate + '-' + item
    },
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children == null || (node.children && node.children.length == 0)) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    }

  }
}
</script>

<style scoped>
.table-img {
  display: inline-block;
  text-align: center;
  background: #ccc;
  color: #fff;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
</style>
